<template>
	<view class="withdrawal_wp" @click="closeTip">
		<!-- <view class="bg"></view> -->
		<view class="info">
			<view class="top">
				<view class="money">
					<view>账户余额</view>
					<view class="coin">{{info.credit}}</view>
				</view>
				<image :src="info.avatar"></image>
			</view>
			<view class="num">
				<view class="number">{{info.nickname}}</view>
				<view class="tip" @click="$navTo('/pages/userservice/commission')">钱包明细></view>
			</view>
			<view style="font-size: 24rpx;margin-top: 6rpx;" v-if="info.thawcredit>0">{{info.thawcredit}}米券冻结中，解冻后发放至钱包</view>
		</view>
		<view class="record">
			<view class="withdrawal_number">
				<view class="head">提现账户</view>
				<view class="with_types">
					<view class="with_type_item" :class="{'with_type_active':acurrent==0}" @click="aradioChange(0)">
						<view>佣金收入</view>
						<image v-if="acurrent==0" src="/static/user/qianbaoy1.png"></image>
						<image v-else src="/static/user/qianbaoy.png"></image>
					</view>
					<view class="with_type_item" v-if="info.ismerch==1" :class="{'with_type_active':acurrent==1,}" @click="aradioChange(1)">
						<view>商户收入</view>
						<image v-if="acurrent==1" src="/static/user/qianbaos1.png"></image>
						<image v-else src="/static/user/qianbaos.png"></image>
					</view>
					<view class="with_type_item" :class="{'with_type_active':acurrent==2}" @click="aradioChange(2)">
						<view>米券</view>
						<image v-if="acurrent==2" src="/static/user/qianbaog1.png"></image>
						<image v-else src="/static/user/qianbaog.png"></image>
					</view>
					<view class="with_type_item" v-if="info.ismerch==1" :class="{'with_type_active':acurrent==3}" @click="aradioChange(3)">
						<!-- <view> -->
							<view>商家让利补贴</view>
							<!-- <view style="font-size: 20rpx;text-align: center;">(米券)</view> -->
						<!-- </view> -->
						<image v-if="acurrent==3" src="/static/user/qianbaos1.png"></image>
						<image v-else src="/static/user/qianbaos.png"></image>
					</view>
				</view>
			</view>
			<view class="with_tips" v-if="acurrent==2">【温馨提示】<br>1. 米券是一种平台消费券<br>2. 米券不支持提现<br>3. 米券可在多米街付款时直接抵扣现金</view>
			<block v-if="acurrent!=2">
				<view class="withdrawal_number">
					<block v-if="current==3">
						<view class="head">转换金额</view>
					</block>
					<block v-else>
						<view class="head">提现金额</view>
					</block>
					<view class="withdrawal_number_value"><text>￥</text> <input type="number" placeholder="输入整数金额" v-model="money" @input="changeMoney" /><text @click="qwithdrawal" class="all"><block v-if="current==3">全部转换</block><block v-else>全部提现</block></text></view>
					<view class="with_settrade" v-if="info.settrade!=0">
						<view>提现手续费：￥-{{servicecharge}}</view>
						<view>提现手续费：{{info.settrade}}%</view>
					</view>
					<view class="with_settrade" v-if="info.settrade!=0">
						<view>实际到账：￥{{money - servicecharge}}</view>
					</view>
				</view>
				<!-- <view class="withdrawal_status"> -->
				<view class="withdrawal_status" v-if="info.openmoney==1">
					<zb-tooltip content="" placement="right" ref="tooltip13">
						<view slot="content">
							<view style="line-height: 40rpx;">如需更换收款信息<br>选择收款方式后<br>添加账号信息即可</view>
						</view>
						<view class="head flex_align_center">提现方式<image src="https://img.jinghushi.com/images/0/2025/03/qqoQE6EQbbM3hHEekWAEUHKEBepAQU.png" mode="widthFix" style="width: 30rpx;margin-left: 10rpx;"></image></view>
					</zb-tooltip>
					<radio-group class="withdrawal_status_item" @change="radioChange">
						<label class="withdrawal_status_label" v-for="(item, index) in items" :key="item.value">
							<view class="withdrawal_status_type">
								<text class="iconfont icon" :class="{'icon-weixin':item.value==2,'icon-zhifubao':item.value==1,'icon-yinhangka_mian':item.value==0}"></text>
								<text>{{item.name}}</text>
								<!-- <text style="color:red;" v-if="(item.value==0||item.value==1||item.value==2)&&(acurrent==1||acurrent==3)">(最低1元起)</text>
								<text style="color:red;" v-if="(item.value==0||item.value==1||item.value==2)&&(acurrent==0||acurrent==2)">(最低10元起)</text>
								<text style="color:red;" v-if="item.value==3">(最低1元起)</text> -->
								<text style="color:red;" v-if="(item.value==0||item.value==1||item.value==2)&&info.tradeLimit>0">(最低{{info.tradeLimit}}元起)</text>
								<text style="color:red;" v-if="item.value==1">(到账快)</text>
							</view>
							<view>
								<radio class="withdrawal_status_radio" color="#8615E1" :value="item.value" :checked="item.value == current" />
							</view>
						</label>
					</radio-group>
					<view class="ali_info" v-if="current==0">
						<view class="menu">提现账号</view>
						<view class="withdrawal_message border">开户银行<input type="text" v-model="bank" placeholder="请填写开户银行" /></view>
						<view class="withdrawal_message border">支行名称<input type="text" v-model="bankaddress" placeholder="请填写支行名称" /></view>
						<view class="withdrawal_message border">卡号<input type="number" v-model="bankcard" placeholder="请填写银行卡卡号" /></view>
						<view class="withdrawal_message">姓名<input type="text" v-model="bankname" placeholder="请填写姓名" /></view>
					</view>
					<view class="ali_info" v-if="current==1">
						<view class="menu">提现账号</view>
						<view class="withdrawal_message border">支付宝姓名<input type="text" v-model="alipayname" placeholder="请填写支付宝姓名" /></view>
						<view class="withdrawal_message">支付宝账号<input type="text" v-model="alipay" placeholder="请填写支付宝账号" /></view>
					</view>
					<view class="ali_info" v-if="current==2">
						<view class="menu">提现账号</view>
						<view class="withdrawal_message"><input type="text" disabled="true" v-model="info.nickname" placeholder="" /></view>
					</view>
				</view>
				<view class="setPassword" v-if="info.openmoney==1" @click="$navTo('/pages/user/paypassword')">设置提现密码></view>
			</block>
			<!-- #ifdef MP-WEIXIN -->
			<view class="setPassword" style="color:#1758c5;" v-if="acurrent==2" @click="openKefu">在线客服></view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="setPassword" v-if="acurrent==2">
				<contact-button tnt-inst-id="Ze1_kUBV" scene="SCE01336870" size="120rpx" icon="https://img.jinghushi.com/images/0/2025/02/Tz15S0HgSuUuSduSSSSSQH3P1ZE15u.png"/>
			</view>
			<!-- #endif -->
			<view class="setPassword" style="color:#1758c5;" v-if="acurrent==2" @click="phoneCall('4001355345')">400 135 5345</view>
		</view>
		<block v-if="acurrent!=2">
			<view class="reaname_sumbit" @click="onsumbit"><block v-if="current==3">确认转换</block><block v-else>确认提现</block></view>
		</block>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<!-- <uni-popup-dialog before-close="true" mode="input" title="密码" placeholder="请输入支付密码" @close="closeDia" @confirm="realSubmit"></uni-popup-dialog> -->
			<uni-popup-dialog type="info" cancelText="关闭" before-close="true" confirmText="确定" title="提现密码" content="欢迎使用 uni-popup!" @confirm="noMulitipClick(realSubmit,3000)" @close="closeDia">
				<!-- #ifdef MP-WEIXIN -->
				<input type="password" v-model="password" class="with_password" placeholder="请输入提现密码">
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<input type="text" password v-model="password" class="with_password" placeholder="请输入提现密码">
				<!-- #endif -->
			</uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="sure_popup" background-color="#fff" type="center">
			<view class="sure_content">
				<view class="sure_tit">提示</view>
				<view style="margin-bottom: 14rpx;">请确认提现银行为</view>
				<view class="sure_num">{{bank}}{{bankaddress}}</view>
				<view class="sure_num">{{bankcard}}{{bankname}}</view>
				<view class="flex_between">
					<view class="sure_btn" @click="cancelSubmit">返回修改</view>
					<view class="sure_btn sure_btn2" @click="openSure">提交</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				acurrent: 0,
				current: -1,
				info: {
					credit: '0.00',
					settrade: 0,
					ismerch: 0,
					alipay: '',
					alipayname: '',
				},
				money: '',
				servicecharge: 0,
				alipay: '',
				alipayname: '',
				oldPassword: '',
				password: '',
				yinhangka: '',
				yinhangkaNum: '',
				bankcard: '',
				bankname: '',
				bank: '',
				bankaddress: '',
				noClick: true
			}
		},
		onLoad() {
			// this.getInfo();
		},
		onShow(){
			this.getInfo();
			this.getPassword();
		},
		methods: {
			closeTip(){
				this.$refs.tooltip13.close()
			},
			phoneCall(v) {
				uni.makePhoneCall({
					phoneNumber: v
				})
			},
			openKefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			getPassword(){
				this.$axios('Info/paymain', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						this.oldPassword = res.data.data.paypwd;						
					}
				})
			},
			getInfo() {
				let that = this;
				that.money = '';
				that.$axios('Money/main', 'POST', 'commission', {
					type: that.acurrent
				}).then(res => {
					if (res.data.code == 200) {
						that.info = res.data.data;
						that.alipayname = that.info.alipayname;
						that.alipay = that.info.alipay;
						that.bankcard = that.info.bankcard || '';
						that.bankname = that.info.bankname || '';
						that.bank = that.info.bank || '';
						that.bankaddress = that.info.bankaddress || '';
						that.items = [
							// {
							// 	value: '0',
							// 	name: '银行卡',
							// 	checked: true
							// },
						];
						if(that.info.openyhk==1){
							that.items.push({
								value: '0',
								name: '银行卡',
								checked: true
							});
						}
						if(that.info.openzfb==1){
							that.items.push({
								value: '1',
								name: '支付宝',
								checked: true
							});
						}
						if(that.info.openwx==1){
							that.items.push({
								value: '2',
								name: '微信',
								checked: true
							});
						}
						if(that.info.openzh==1){
							that.items.push({
								value: '3',
								name: '转到米券钱包',
								checked: true
							});
						}
					}
				})
			},
			changeMoney() {
				let number = Math.trunc(this.money);
				this.$nextTick(()=>{
					this.money = number;
				})
				this.servicecharge = this.money * this.info.settrade / 100;
				
			},
			qwithdrawal() {
				this.money = Math.trunc(this.info.credit);
				// this.servicecharge = this.info.credit * this.info.settrade / 100;
				this.servicecharge = this.money * this.info.settrade / 100;
			},
			cancelSubmit(){
				this.$refs.sure_popup.close();
			},
			openSure(){
				this.$refs.sure_popup.close();
				if(this.oldPassword == ''){
					this.$api.msg('请先设置提现密码');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/paypassword'
						})
					}, 1000);
					return;
				}else{
					this.$refs.inputDialog.open();
				}
			},
			onsumbit() {
				if (!this.money) {
					this.$api.msg('申请金额为空！')
					return;
				}
				if (this.money * 1 > this.info.credit * 1) {
					this.$api.msg('余额不足！')
					return;
				}
				if(this.current == -1){
					this.$api.msg('请选择提现方式')
					return;
				}
				if(this.current==1){
					if (this.alipayname == '' || this.alipay == '') {
						this.$api.msg('请完善收款人信息！')
						return;
					}
				}
				if(this.current==0){
					if (this.bank==''||this.bankaddress==''||this.bankcard == '' || this.bankname == '') {
						this.$api.msg('请完善收款人信息！')
						return;
					}
					this.$refs.sure_popup.open();
					return;
				}
				if(this.oldPassword == ''){
					this.$api.msg('请先设置提现密码');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/user/paypassword'
						})
					}, 1000);
					return;
				}else{
					this.$refs.inputDialog.open();
				}
			},
			closeDia(){
				this.$refs.inputDialog.close();
			},
			// 防抖
			noMulitipClick(methods,time){
				let that = this;
				if(that.noClick){
					that.noClick=false;
					methods();
					setTimeout(()=>{
						that.noClick=true;
					},time)
				}else{
					console.log(time/1000+'秒内不允许重复点击')
				}
			},
			realSubmit(){
				if(this.password==''){
					return this.$api.msg('请输入提现密码');
				}
				// console.log(this.password);
				// return;
				let obj = {
					money: this.money,
					alipay: this.alipay,
					alipayname: this.alipayname,
					sendpay: this.current,
					type: this.acurrent,
					paypwd: this.password,
					bankcard: this.bankcard,
					bankname: this.bankname,
					bank: this.bank,
					bankaddress: this.bankaddress
				}
				this.$axios('Money/submit', 'POST', 'commission', obj).then(res => {
					this.$refs.inputDialog.close();
					this.password = '';
					if (res.data.code == 200) {
						this.$api.msg('提交成功！');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/userservice/commission'
							})
						}, 1000)
					}
				})
			},
			aradioChange(e) {
				this.acurrent = e;
				this.servicecharge = 0;
				this.current = -1;
				this.getInfo();
			},
			radioChange: function(evt) {
				// this.current = evt.detail.value;
				this.current = Number(evt.detail.value);
				// for (let i = 0; i < this.items.length; i++) {
				// 	if (this.items[i].value === evt.detail.value) {
				// 		this.current = i;
				// 		break;
				// 	}
				// }
			}
		}
	}
</script>

<style lang="scss">
	@import '/store/icon.css';

	page {
		background-color: #FBF8FE;
		color: $font-color-dark;
		padding-bottom: 120rpx;
	}
	.with_tips{
		color: #de2f2f;
		line-height: 50rpx;
	}
	.sure_content{
		padding: 40rpx;
		text-align: center;
		font-size: 32rpx;
		width: 700rpx;
		.sure_tit{
			font-size: 38rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		.sure_num{
			font-size: 44rpx;
			font-weight: bold;
			color: #AF141D;
		}
		.sure_btn{
			width: 300rpx;
			line-height: 70rpx;
			box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
			border-radius: 12rpx;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			text-align: center;
			font-size: 30rpx;
			margin-top: 30rpx;
		}
		.sure_btn2{
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			box-shadow: 0rpx 0rpx 26rpx 0rpx rgba(243,232,252,0.5);
			color: #FFFFFF;
			margin-left: 50rpx;
		}
	}
	.bg{
		width: 83%;
		height: 150rpx;
		background: #c98bf2;
		border-radius: 24rpx;
		position: fixed;
		top: 20rpx;
		left: 0;
		right: 0;
		margin: auto;
	}
	.with_password{
		border: 1rpx solid #ece5e5;
	    height: 70rpx;
	    padding: 0 16rpx;
	    border-radius: 8rpx;
	    width: 80%;
	}
	.info{
		width: 94%;
		height: 320rpx;
		background: linear-gradient( 135deg, #B92DF1 0%, #8A17E2 100%);
		border-radius: 24rpx;
		padding: 40rpx;
		color:#fff;
		margin: auto;
		// margin-top: 40rpx;
		position: relative;
		.top{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #FFFFFF30;
			justify-content: space-between;
			padding-bottom: 30rpx;
			image{
				width: 124rpx;
				height: 124rpx;
				border-radius: 12rpx;
				border: 4rpx solid #fff;
			}
			.money{
				font-size: 24rpx;
				color:#ffffffc7;
				.coin{
					font-size: 68rpx;
					font-weight: 600;
					color:#ffffff;
				}
			}
		}
		.num{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.number{
				font-size: 28rpx;
				font-weight: 600;
			}
			.tip{
				font-size: 28rpx;
				color:#ffffffc7;
			}
		}
	}
	.setPassword{
		text-align: right;
	    margin-top: 20rpx;
	    color: #999999;
	    font-size: 24rpx;	
	}
	.record{
		font-size: 28rpx;
		color: #333333;
		margin-top: -30rpx;
		padding-bottom: 70rpx;
		padding: 36rpx 20rpx;
	}
	.withdrawal_number {
		.amount{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.a_item{
				width: 216rpx;
				height: 120rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				background: #F0E1FF;
				font-size: 48rpx;
				font-weight: 600;
				text-align: center;
				line-height: 120rpx;
				color: #8615E1;
				text{
					font-size: 32rpx;
					font-weight: 400;
				}
			}
			.a_item_ac{
				background: #8615E1;
				color: #ffffff;
			}
		}
		.withdrawal_message {
			color: $font-color-light;
			font-size: $font-sm;
			line-height: 60upx;
			padding: 20upx 0;
		}
		.with_types{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.with_type_item{
				width: 340rpx;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				font-size: 32rpx;
				color: #999999;
				font-weight: 600;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				margin-bottom: 20rpx;
				image{
					width: 42rpx;
					height: 42rpx;
				}
			}
			.with_type_active{
				background: #F0E1FF;
				color: #8615E1;
			}
			.with_type2{
				width: 218rpx;
				padding: 0 20rpx;
				image{
					width: 30rpx;
				}
			}
		}
		.with_settrade{
			display: flex;
			justify-content: space-between;
			color: #666;
			margin-top: 20rpx;
		}
	}
	
	.withdrawal_number_value {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #fff;
		border-radius: 12rpx;
		justify-content: space-between;
		text {
			font-size: 48rpx;
			font-weight: bold;
			margin-right: 10upx;
			color: #8615E1;
		}
		input {
			font-size: 28rpx;
			flex: 1;
			color: #999999;
		}
		.all{
			font-size: 32rpx;
			font-weight: 600;
			color: #8615E1;
		}
	}
	.withdrawal_status_label,
	.withdrawal_status_type {
		display: flex;
		align-items: center;
	}
	
	.withdrawal_status_label {
		flex: 1;
		width: 100%;
		background: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;
	}
	
	.withdrawal_status_radio {
		transform: scale(0.8);
	}
	
	.withdrawal_status_type .icon {
		font-size: 68rpx;
		margin-right: 20rpx;
	}
	.icon-weixin {
		color: #50bb34;
	}
	
	.icon-zhifubao {
		color: #44a9fd;
	}
	.ali_info{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		.menu{
			font-weight: 600;
		}
		.withdrawal_message {
			color: #333;
			font-size: $font-sm;
			line-height: 60upx;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
		}
		
		.withdrawal_message text {
			color: $base-color;
			margin-left: 30upx;
		}
		
		.withdrawal_message input {
			color: $font-color-dark;
			font-size: $font-sm;
			margin-left: 30rpx;
		}
		.border{
			border-bottom: 1rpx solid #DEDEDE;
		}
	}
	.head{
		position: relative;
		font-size: 32rpx;
		color: #333333;
		font-weight: 600;
		padding-left: 28rpx;
		margin: 30rpx 0;
		&::before{
			content: '';
			position: absolute;
			left: 0;
			top: 6rpx;
			width: 8rpx;
			height: 32rpx;
			background: #8615E1;
			border-radius: 6rpx;
		}
	}
	.reaname_sumbit {
		background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
		border-radius: 38rpx;
		color: #fff;
		font-size: 28rpx;
		height: 74rpx;
		line-height: 74rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		width: 396rpx;
		z-index: 999;
	}
</style>